/** 
     @type {HTMLCanvasElement}
    @type {HTMLElement}
 */ 
var canvasWidth = Math.min(600,$(window).width()-20); 
var canvasHeight = canvasWidth;
var isMouseDown =false;
var lastLoc={x:0,y:0};
var lastTimeStamp  = 0;
var lastLineWidth = -1;
var maxLineWidth = 15;
var minLineWidth = 1;
var maxStrokeV = 10;
var minStrokeV = 0.1;
var strokeColor = "black";

var canvas = document.querySelector("#canvas");
var context = canvas.getContext("2d");

canvas.width = canvasWidth;
canvas.height = canvasHeight;
$("#main").css("width",canvasWidth+"px");
$("#controller").css("width",canvasWidth+"px").css("top",canvasWidth+"px");

drawGrid();
function drawGrid() {
    context.save();
    context.strokeStyle = "#AA100A";

    context.beginPath();
    context.moveTo(3, 3);
    context.lineTo(canvasWidth - 3, 3);
    context.lineTo(canvasWidth - 3, canvasHeight - 3);
    context.lineTo(3, canvasHeight - 3);
    context.closePath();

    context.lineWidth = 6;
    context.stroke();    
    context.restore();
}
//转画布坐标
function windowToCanvas(x,y){
    var bbox = canvas.getBoundingClientRect();
    // console.log(x,y);
    return {x:Math.round(x-bbox.left), y:Math.round(y-bbox.top)};
}

function calcDistance(loc1,loc2){
    return Math.sqrt(Math.pow(loc1.x-loc2.x,2)+Math.pow(loc1.y-loc2.y,2));
}
function calcLineWidth(t,s){
    var v = s/t;
    console.log(v);
    var returnLineWidth; 
    if(v <= minStrokeV)
        returnLineWidth = maxLineWidth;
    else if(v >= maxStrokeV)
        returnLineWidth = minLineWidth;
    else
        returnLineWidth = maxLineWidth- (v-minStrokeV)/(maxStrokeV-minStrokeV)*(maxLineWidth-minLineWidth);
    if(lastLineWidth==-1)
        return returnLineWidth;
    return lastLineWidth*2/3 + returnLineWidth*1/3;
}
function beginStroke(point){
    isMouseDown =true;    
    lastLoc = windowToCanvas(point.x,point.y);
    lastTimeStamp = new Date().getTime();
}
function endStroke(){
    isMouseDown =false; 
}
function moveStroke(point){
    var curLoc = windowToCanvas(point.x,point.y);
    var s = calcDistance(curLoc,lastLoc);
    var curTimeStamp = new Date().getTime();
    var t = curTimeStamp-lastTimeStamp;

    var lineWidth = calcLineWidth(t,s);

    //draw
    context.beginPath();
    context.moveTo(lastLoc.x,lastLoc.y);
    context.lineTo(curLoc.x,curLoc.y);

    context.strokeStyle=strokeColor;
    context.lineWidth =lineWidth;
    context.lineCap = "round";
    context.lineJoin = "round";
    context.stroke();

    lastLoc = curLoc;
    lastTimeStamp = curTimeStamp;
    lastLineWidth = lineWidth;
}
canvas.onmousedown=function(e){
    e.preventDefault();
    beginStroke({x:e.clientX,y:e.clientY});
    // console.log("mouseDown",lastLoc);
}

canvas.onmouseup=function(e){
    e.preventDefault();
    endStroke();   
    // console.log("mouseup");
}
canvas.onmouseout=function(e){
    e.preventDefault();
    endStroke();
    // console.log("mouseout");
}
canvas.onmousemove=function(e){
    e.preventDefault();
    if(isMouseDown){        
        moveStroke({x:e.clientX,y:e.clientY});
        // console.log("mouseMove",curLoc);
    }    
}

canvas.ontouchstart=function(e){
    e.preventDefault();
    touch=e.touches[0];
    beginStroke({x:touch.pageX,y:touch.pageY});
    // console.log("mouseup");
}
canvas.ontouchmove=function(e){
    e.preventDefault();
    if(isMouseDown){    
        touch=e.touches[0];    
        moveStroke({x:touch.pageX,y:touch.pageY});
    }       
}
canvas.ontouchend=function(e){
    e.preventDefault();
    endStroke();
}


document.querySelector("#clear").onclick=function(){
    context.clearRect(0,0,canvasWidth,canvasHeight);
    drawGrid();
    strokeColor = "black";
    $("#black_btn").trigger("click");
}
$(".color_btn").click(function(e){
    $(".color_btn").removeClass("color_btn_selecter");
    $(this).addClass("color_btn_selecter");
    strokeColor = $(this).css("background-color");
})